<template>
  <div>
    <p>{{msg}}</p>
    <p>{{$store.state.count}}---{{count}}</p>
    <p>
      <button @click="$store.commit('add',0)">+1</button>
      <button @click="$store.commit('reduce')">-1</button>
    </p>
    <p>
      <button @click="add(0)">+1:mapMutations</button>
      <button @click="reduce">-1:mapMutations</button>
    </p>
    <p>
      action
      <button @click="addAction">+1:Action</button>
      <button @click="reduceAction">-1:Action</button>
    </p>

    <p>
      {{$store.state.info}} --- {{info}}
    </p>
  </div>
</template>

<script>
  import store from '@/vuex/store';
  import {
    mapState,
    mapMutations,
    mapGetters,
    mapActions
  } from 'vuex';

  export default {
    data() {
      return {
        msg: 'Hellow Vuex!'
      }
    },
    // 数组的方式 引入方法
    //methods: mapMutations(['add', 'reduce']),
    // 第二种方式
    methods:{
      ...mapMutations(['add','reduce']),
      ...mapActions(['addAction','reduceAction'])
    },

    //    第一张方式
    // computed:{
    //   count(){
    //     return this.$store.state.count;
    //   },
    //   info(){
    //     return this.$store.state.info;
    //   }
    // },
    //   第二种 ES6 写法
    // computed:mapState({
    //   count:state=>state.count
    // }),
    //  第二种 ES5 写法
    // computed:mapState({
    //   count:function(state){
    //     return state.count;
    //   }
    // }),
    // 第三种
    //computed:mapState(['count','info']),
    computed: {
      ...mapState(['count', 'info']),
      //1 无需引入 mapGetters
      // count(){
      //   return this.$store.getters.count;
      // },
      //2.引入mapGetters
      ...mapGetters(['count'])
    },
    store
  }
</script>
